<template>
  <div class="container">
    <el-card>
      <el-breadcrumb :separator-icon="ArrowRight" v-if="$route.query.subjectName">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.subjectName}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        <el-divider />
      </el-breadcrumb>
      <!-- 顶部搜索框 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="18">
          <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="标签名称">
              <el-input v-model="search.tagName" placeholder="根据标签名称搜索" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="search.state" placeholder="请选择">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="removeVal">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row justify="space-between">
            <el-col :span="12">
              <el-button type="primary" link :icon="Back" @click="$router.go(-1)">返回学科</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="success" @click="dialogVisible=true" :icon="EditPen">新增标签
          </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示文本 -->
      <el-row>
        <el-alert type="info" show-icon :closable="false">
          <template v-slot>
            数据一共 {{page.total}} 条
          </template>
        </el-alert>
      </el-row>
      <!-- 表格 -->
      <el-row>
        <el-table :data="tableData.list" style="width: 100%" fit>
          <el-table-column prop="date" type="index" label="序号" width="80" />
          <el-table-column prop="subjectName" label="所属学科" width="400">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建时间" width="180" />
          <el-table-column prop="state" label="状态">
            <template v-slot="{row}">
              {{ row.state === 1 ? '已启用' : '已禁止'}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="220">
            <template v-slot="{row}">
              <el-button type="primary" link @click="disableAn(row)">{{row.state === 1?'启动':'禁用'}}</el-button>
              <el-button :type="row.state === 1?'info':'primary'" :disabled="row.state === 1?1:0" link
                @click="Modify(row)">修改</el-button>
              <el-button :type="row.state === 1?'info':'primary'" :disabled="row.state === 1?1:0" link
                @click="removeList(row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top: 20px;">
        <el-pagination :page-sizes="[5, 10, 20, 50]" background layout=" prev, pager, next, sizes, jumper"
          :current-page="page.page" :page-size="page.pagesize" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </el-card>
    <!-- 新增组件 -->
    <tags-add v-if="dialogVisible" @close="dialogVisible=false" :dialogVisible="dialogVisible" @getList="getList"
      ref="refAdd"></tags-add>
    <!-- 删除的确认弹框 -->
    <el-row>

    </el-row>
  </div>
</template>

<script>
import { changeState, detail, list, remove } from '@/api/hmmm/tags.js'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { parseTimeByString } from '@/filters/index.js'
import TagsAdd from '../components/tags-add.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { Back, EditPen, ArrowRight } from '@element-plus/icons-vue'
export default {
  name: 'Articles',
  components: { TagsAdd },
  setup (props) {
    // 修改
    const router = useRouter()
    const route = useRoute()
    const refAdd = ref()
    async function Modify (row) {
      dialogVisible.value = true
      await nextTick()
      refAdd.value.formData = row
    }
    // 删除
    async function removeList (id) {
      ElMessageBox.confirm(
        '此操作将永久删除该标签, 是否继续?', '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '操作成功'
          })
          getList()
        })
      await remove(id)
    }
    // 禁用
    async function disableAn (obj) {
      obj.state = obj.state === 1 ? 0 : 1
      await changeState(obj)
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
    }
    const PreviewVisible = ref(false)
    // 新增弹框
    const dialogVisible = ref(false)
    // 搜索框数据
    const search = reactive({
      tagName: '',
      state: ''
    })
    // 搜索方法
    const onSubmit = () => {
      if (search.state === '1' || search.state === '0') {
        getList(search)
      } else {
        const tagName = {}
        tagName.tagName = search.tagName
        getList(tagName)
      }
    }
    // 清空数据
    const removeVal = () => {
      search.tagName = ''
      search.state = ''
    }
    // 表格数据
    const tableData = reactive({
      list: []
    })
    async function getList (search) {
      const { data } = await list({
        ...search,
        ...page
      })
      tableData.list = data.items
      console.log(tableData.list)
      // 状态转换
      tableData.list.forEach(t => {
        t.addDate = parseTimeByString(t.addDate)
      })
      page.page = data.page
      page.total = data.counts
      page.pagesize = data.pagesize
      if (route.query.subjectName) {
        // console.log(route.query.subjectName)
        tableData.list = tableData.list.filter(item => {
          return item.subjectName === route.query.subjectName
        })
        // console.log(state.tableData)
      }
      // console.log(data)
    }
    onMounted(() => {
      getList()
    })
    // 分页器
    const page = reactive({
      page: 1,
      pagesize: 10,
      total: 0
    })
    const handleSizeChange = (val) => {
      page.pagesize = val
      getList()
    }
    const handleCurrentChange = (val) => {
      page.page = val
      getList()
    }

    return {
      search, onSubmit, tableData, handleSizeChange, handleCurrentChange, page, removeVal, dialogVisible, getList, PreviewVisible, disableAn, removeList, Modify, refAdd, Back, EditPen, ArrowRight
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-pagination .el-select .el-input {
  width: 100px;
  margin-left: 20px;
}

::v-deep .el-input__wrapper .el-input__inner::placeholder {
  font-size: 13px;
  margin: 5px;
}

.icon-video {
  font-size: 16px;
  color: blue;
  margin-left: 10px;
}
</style>
